/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #3366FF;
  --ifm-color-primary-dark: #144fff;
  --ifm-color-primary-darker: #0544ff;
  --ifm-color-primary-darkest: #0036d6;
  --ifm-color-primary-light: #527dff;
  --ifm-color-primary-lighter: #6188ff;
  --ifm-color-primary-lightest: #89a6ff;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
  --banner-height: 40px;
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
  --ifm-background-color: #121B2E !important;
  --ifm-color-primary: #6690FF;
  --ifm-color-primary-dark: #4276ff;
  --ifm-color-primary-darker: #3069ff;
  --ifm-color-primary-darkest: #0045fa;
  --ifm-color-primary-light: #8aaaff;
  --ifm-color-primary-lighter: #9cb7ff;
  --ifm-color-primary-lightest: #cad9ff;
  --ifm-font-color-base-inverse: #ffffff;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

.fixed-banner {
  position: fixed;
  top: 0;
  width: 100%;
  height: var(--banner-height);
  background-color: red;
  color: white;
  text-align: center;
  padding: 10px 10px;
  z-index: 1000;
}

@media (max-width: 768px) {
  .fixed-banner {
    height: calc(var(--banner-height) * 3);
  }
}

.fixed-banner a {
  color: white;
  text-decoration: underline;
}

.banner-placeholder {
  height: var(--banner-height);
}

@media (max-width: 768px) {
  .banner-placeholder {
    height: calc(var(--banner-height) * 3);
  }
}

blockquote {
  border-left: 6px solid #e0e1da;
  background-color: #ebfbfa;
  color: #5b626b;
  font-size: 1rem;
  margin: 0 0 1rem 0;
  padding: 1rem 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  font-style: italic;
}

html[data-theme="dark"] blockquote {
  border-left: 6px solid #5c5d5f;
  background-color: #243950;
  color: #bcc3cc;
  box-shadow: none;
}

iframe {
  width: 100%;
  height: 500px;
  border: none;
  border-radius: 10px;
  /* width: 100%; */
}

details {
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: all 1.3s ease;
  padding: 0.5em;
  transform: scale(1);
}

details:not([open]):hover {
  transform: scale(1.02);
  background-color: #362ecc74;
}

summary {
  font-weight: bold;
  cursor: pointer;
  position: relative;
  padding-right: 20px;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: '❯';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transition: transform 0.3s ease;
}

details[open] summary::after {
  transform: translateY(-50%) rotate(270deg);
}

details:not([open]):hover {
  background-color: #362ecc74;
}

details>*:not(summary) {
  margin-top: 0.5em;
}

table {
  width: 100%;
}

.centered-cell {
  text-align: center;
  vertical-align: middle;
}

table a {
  color: #0477eb;
  text-decoration: none;
  transition: color 0.25s ease;
}

table a:hover {
  color: #049eeb;
  text-decoration: underline;
}

#elevatedbtn {
  font-family: Archivo Black;
  border: 4px solid #050137;
  border-radius: 12px;
  box-shadow: 4px 4px 0 #050137;
  box-sizing: border-box;
  transition: transform 0.1s ease;
}

/* #elevatedbtn:hover {
  transform: scale(1.01);
} */

/* Redundant since #ID is unique and is mounted for CN (default) and NOT for EN on mount */

#elevatedbtnEN {
  font-family: Archivo Black;
  border: 4px solid #050137;
  border-radius: 12px;
  box-shadow: 4px 4px 0 #050137;
  box-sizing: border-box;
}

article {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1440px) {
  .container {
    max-width: 90%;
  }
}

.no-footer footer {
  display: none;
}

.header--github-dropdown {
  display: flex;
  align-items: center;
}

.header--github-dropdown::before {
  content: '';
  width: 24px;
  height: 24px;
  margin-right: 8px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
}

html[data-theme='dark'] .header--github-dropdown::before {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
}

@media (min-width: 768px) {
  .header--github-dropdown::after {
    content: '▼';
    font-size: 16px;
    margin-left: 4px;
    margin-top: 7px;
    transition: transform 0.3s ease;
  }

  .header--github-dropdown[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }
}

.header--github-dropdown:hover {
  border-radius: 4px;
}
